﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="MyMealPlan.aspx.cs" Inherits="MyMealPlan" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />

    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <script src="Scripts/jquery.min.js" type="text/javascript" > </script>
    <script src="Scripts/jquery.slimscroll.js" language="javascript" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {
        var userid = '<%=Session["Userid"]%>';
        loadMealPlan(userid);
        // BindSuggestion(userid);
        SearchMealPlan(userid);
        //ClosePage();
    });

    function SearchMealPlan(userid) {
        $('.btn_search').click(function () {
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetMealPlanByName",
                data: "{'MealPlanName':'" + $("#inPutSearch").val() + "','UserId':'" + userid + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlan(response);
                    bindDragandDrop();
                }
            });
        });
    }

    function ViewMealPlanFullView(mealPlanToView) {
        self.location = "MealPlan.aspx?MealPlanId=" + mealPlanToView + "";
    }

    function loadMealPlan(userid) {
        $.ajax({
            type: "POST",
            url: "PIMServices.asmx/GetMealPlan",
            data: "{'MealPlanId':'0','UserId':'" + userid + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindMeaPlan(response);
            },
            error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
        });

    }
    function AddMyGrocery(MealPlanId) {
        $("#gallery li#" + MealPlanId).remove();
        $.ajax({
            type: "POST",
            url: "PIMServices.asmx/GetRecipeUserByMealPlan",
            data: "{'MealPlanId':'" + MealPlanId + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                //alert(response.d);
                //BindRecipe(response);
                for (var i = 0; i < response.d.length; i++) {
                    var varObjectID = response.d[i].RecipeID;
                    alert(varObjectID);
                    document.getElementById("<%=GroceryRecipe.ClientID %>").value += "," + varObjectID;
                }

            },
            error: function (msg) { alert(msg.constructor) }
        });

    }
    

    function BindMeaPlan(response) {
        var mealPlan = response.d;
        var html = '';
        var userid = '<%=Session["Userid"]%>';
        if (mealPlan.length > 0) {
            for (var i = 0; i < mealPlan.length; i++) {
                var varObjectID = mealPlan[i].MealPlanID;
                var varObjectName;
                var varObjectNameFull;
                if (mealPlan[i].MealPlanName != null) {
                    //                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10) + ' ..';
                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10);

                    varObjectNameFull = mealPlan[i].MealPlanName;
                    if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                }
                else {
                    varObjectName = 'No Name..';
                    varObjectNameFull = 'No Name';
                }
                var varObjectImage = mealPlan[i].MealPlanPhoto;
                var rating = mealPlan[i].MealPlanRating;
                rating = "'" + rating + "'";

                html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                html += '<a id="' + varObjectID + ' class="none-decoration" "href="MealPlan.aspx?MealPlanId=' + varObjectID + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">' + varObjectName + '</a>';
                html += '<img class="tooltip" id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;" title="<b>Description: </b>' + varObjectNameFull + '</br><b>Author: </b></br><div class=basic data-average=' + rating + ' data-id=1></div>" onclick="ViewMealPlanFullView(' + varObjectID + ')">';
                //html += '<p>';
                if (userid != '') {
                    html += '<a onclick="javascript:AddMyGrocery(' +varObjectID +')" title="Create meal plan" class="ui-icon ui-icon-plus" style="float:right"></a>';
                }
                //html += '</p>';
                html += '</li>'
            }
            $('#gallery').html(html);
        }
    }

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div class="search-head" style="">
    <div class="search_bg" >
            <div class="txt_box">
                <input name="searchrecipes" id="inPutSearch" class="textInputs" type="text" onfocus="javascript: if(this.value == 'Search Recipes'){ this.value = ''; }" onblur="javascript: if(this.value==''){this.value='Search Recipes';}" value="Search Recipes" size="22"></div>
            <div class="btn_search" style="height:18px">
                <img src="images/img02.jpg" alt="" width="23" height="18"></div>
    </div>
    <div class="row-image">
        <asp:ImageButton ID="BtnGroceryList" runat="server" 
            ImageUrl="~/images/img01.jpg" CssClass="img-icon" onclick="BtnGroceryList_Click"/>
    </div>
    
    <div style="clear:both"></div>
    </div>
    <div id="primary-main">
    <div id="primary-nav">
        <ul id="gallery">
        </ul>
        <input id="inputMealPlanId" type="hidden" />
    </div>
    </div>
<div style="clear:both"></div>
<asp:HiddenField id="GroceryRecipe" runat="server"/>
</asp:Content>

